<template>
  <view
    class="form-page"
    :style="{
      paddingBottom: isChat ? '120rpx' : '20rpx',
    }"
  >
    <view
      v-if="professional.audit == 2"
      style="font-size: 15px; color: #f44336; padding: 0 0 20rpx 10rpx"
      >{{ '拒绝原因：' + professional.failReason }}
    </view>
    <view class="b-w form-item">
      <u--form labelPosition="left" :model="professional" :rules="rules" ref="uForm">
        <u-form-item
          v-if="professional.name || !examining"
          label="姓名"
          borderBottom
          prop="name"
          ref="item1"
        >
          <u--input
            disabledColor="#ffffff"
            placeholder="输入姓名"
            :disabled="examining"
            v-model="professional.name"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          v-if="professional.sex || !examining"
          label="性别"
          prop="sex"
          borderBottom
          @click="handleShowSex"
          ref="item1"
        >
          <u--input
            disabled
            :value="professional.sex ? (professional.sex == 2 ? '女' : '男') : ''"
            disabledColor="#ffffff"
            placeholder="请选择性别"
            border="none"
          ></u--input>
          <u-icon v-if="!examining" slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item
          v-if="professional.birthday || !examining"
          label="出生年月"
          prop="birthday"
          labelWidth="80"
          borderBottom
          @click="handleBirthdayShow"
        >
          <u--input
            disabled
            :value="professional.birthday | timeForm('YYYY-mm-dd')"
            disabledColor="#ffffff"
            placeholder="请选择年月日"
            border="none"
          ></u--input>
          <u-icon v-if="!examining" slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item
          v-if="professional.mobile || !examining"
          label="手机号码"
          labelWidth="80"
          prop="mobile"
          borderBottom
          ref="item1"
        >
          <u--input
            disabledColor="#ffffff"
            :disabled="examining"
            v-model="professional.mobile"
            placeholder="请输入手机号码"
            maxlength="11"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          v-if="professional.major || !examining"
          label="专业大类"
          labelWidth="80"
          prop="major"
          borderBottom
          @click="handleShowMajor"
        >
          <u--input
            disabledColor="#ffffff"
            disabled
            v-model="professional.major"
            placeholder="请选择专业大类"
            border="none"
          ></u--input>
          <u-icon v-if="!examining" slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item
          v-if="professional.provideDirection || !examining"
          label="可提供科技服务的产业方向"
          labelWidth="100"
          borderBottom
          prop="provideDirection"
        >
          <js-fun-picker
            :listArr="industryList"
            @click="industryListChange"
            :disabled="examining"
            type="multiple"
          >
            <view class="fun-picker-view">
              <view class="industry-name" v-if="industryListStr">{{ industryListStr }}</view>
              <view v-else>请选择产业</view>
            </view>
          </js-fun-picker>
          <u-icon v-if="!examining" slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item
          v-if="
            professional.otherIndustryName ||
            (professional.provideDirection &&
              professional.provideDirection.includes('其他') &&
              !examining)
          "
          label="其他产业名称"
          labelWidth="95"
          borderBottom
          prop="otherIndustryName"
          ref="item1"
        >
          <u--input
            v-model="professional.otherIndustryName"
            placeholder="请输入其他其他产业名称"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          v-if="professional.title || !examining"
          label="职称"
          borderBottom
          @click="handleShowTitle"
          prop="title"
          ref="item1"
        >
          <view>
            <u--input
              :value="professional.title | titleForm"
              disabledColor="#ffffff"
              disabled
              placeholder="请输入职称"
              border="none"
            ></u--input>
          </view>
          <u-icon v-if="!examining" slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item
          v-if="professional.academicDegree || !examining"
          label="学位"
          borderBottom
          prop="academicDegree"
          ref="item1"
          @click="handleShowDegree"
        >
          <u--input
            disabled
            :value="professional.academicDegree | degreeForm"
            disabledColor="#ffffff"
            placeholder="请选择学位"
            border="none"
          ></u--input>
          <u-icon v-if="!examining" slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item
          v-if="professional.company || !examining"
          label="所在单位"
          labelWidth="80"
          borderBottom
          prop="company"
          ref="item1"
        >
          <u--textarea
            :disabled="examining"
            v-model="professional.company"
            maxlength="50"
            count
            autoHeight
            placeholder="请输入所在单位全称"
          ></u--textarea>
        </u-form-item>
        <u-form-item
          v-if="professional.selectType || !examining"
          label="可提供技术服务"
          labelWidth="120"
          prop="selectType"
          ref="item1"
        >
          <!-- <u--input
            disabled
            :value="professional.selectType"
            disabledColor="#ffffff"
            placeholder="请选择服务类型"
            border="none"
          ></u--input> -->
          <js-fun-picker
            :listArr="actionSupport"
            :defaultArr="professional.selectType"
            @click="handleShowSupport"
            :disabled="examining"
            type="multiple"
          >
            <view class="fun-picker-view">
              <view class="industry-name" v-if="professional.selectType">{{
                professional.selectType
              }}</view>
              <view v-else>请选择服务类型</view>
            </view>
          </js-fun-picker>
          <u-icon v-if="!examining" slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <view class="vertical-item">
          <u-form-item
            v-if="professional.support || !examining"
            class="vertical-item"
            labelWidth="0"
            prop="support"
            ref="item1"
          >
            <view class="vertical-textarea">
              <u--textarea
                :disabled="examining"
                class="vertical-textarea"
                v-model="professional.support"
                maxlength="150"
                count
                autoHeight
                placeholder="请输入内容"
              ></u--textarea>
            </view>
          </u-form-item>
        </view>
      </u--form>
      <view class="confirm-btn">
        <template v-if="(myself && professional.audit !== 0) || isAdd">
          <u-button type="primary" @click="handleSubmit" text="提交"></u-button>
        </template>
        <template v-if="!myself && professional.audit === 0">
          <view style="margin-bottom: 20rpx">
            <u-button type="success" @click="handleExamining" text="审核通过"></u-button>
          </view>
          <u-button type="error" @click="handleRefuse" text="审核拒绝"></u-button>
        </template>
      </view>
    </view>
    <u-action-sheet
      :show="showSex"
      :actions="actions"
      title="请选择性别"
      @close="showSex = false"
      @select="sexSelect"
    >
    </u-action-sheet>
    <u-action-sheet
      :show="showMajor"
      :actions="actionsMajor"
      title="请选择专业大类"
      @close="showMajor = false"
      @select="majorSelect"
    >
    </u-action-sheet>
    <u-datetime-picker
      :show="birthDayShow"
      :maxDate="Number(new Date())"
      :minDate="Number(new Date('1968-01-01'))"
      @confirm="handleSelectBirthday"
      @cancel="handleCloseBirthday"
      v-model="professional.birthday"
      mode="date"
    ></u-datetime-picker>
    <u-action-sheet
      :show="titlePickerShow"
      :actions="titleList"
      title="请选择职称"
      @close="titlePickerShow = false"
      @select="changeTitleHandler"
    >
    </u-action-sheet>
    <u-action-sheet
      :show="degreePickerShow"
      :actions="degreeList"
      title="请选择学位"
      @close="degreePickerShow = false"
      @select="changeDegreeHandler"
    >
    </u-action-sheet>
    <u-action-sheet
      :show="showSupport"
      :actions="actionSupport"
      title="请选择服务类型"
      @close="showSupport = false"
      @select="supportSelect"
    >
    </u-action-sheet>
    <public-confirm
      ref="confirm"
      message="确认审核通过"
      :confShow="examiningConfirmShow"
      @confirm="handleExaminingPass"
      @cancel="handleExaminingCancel"
    ></public-confirm>
    <public-confirm
      ref="confirm"
      title="请输入验证码"
      :confShow="codeConfirmShow"
      @confirm="handleCodePass"
      openType="none"
      @cancel="handleCloseCode"
    >
      <view class="code-input" slot="messageSlot">
        <u-input
          placeholder="请输入验证码"
          border="bottom"
          type="number"
          maxlength="11"
          v-model="identifyingCode"
        >
          <view slot="suffix">
            <u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
            <u--text @tap="getCode" :text="tips" type="info" size="mini"></u--text>
          </view>
        </u-input>
      </view>
    </public-confirm>
    <order-remark-pop ref="remarkPop" @remarkComfirn="remarkComfirn"></order-remark-pop>
    <view class="foot-bar flex-x-c" v-if="isChat">
      <view class="flex-y-c item-left" @click="goChat">
        <u-icon class="tags-icon" size="25" name="chat"></u-icon>
        <view class="f24">留言</view>
      </view>
      <view class="flex-x-c"> </view>
    </view>
  </view>
</template>

<script>
import orderRemarkPop from './components/orderRemarkPop'
import jsFunPicker from '@/components/jsfun-picker/jsfun-picker.vue'
export default {
  components: { jsFunPicker, orderRemarkPop },
  data() {
    return {
      isAdd: false,
      tips: '',
      titlePickerShow: false,
      degreePickerShow: false,
      showSupport: false,
      professional: {
        name: '',
        sex: 0,
        birthday: '',
        mobile: '',
        major: '',
        provideDirection: [],
        otherIndustryName: '',
        company: '',
        title: '',
        academicDegree: '',
        selectType: '科技成果转让',
        support: '',
      },
      rules: {
        name: {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change'],
        },
        sex: {
          validator: (rule, value, callback) => {
            if (!value) return callback('请选择性别')
            return callback()
          },
          trigger: ['blur', 'change'],
        },
        birthday: {
          type: 'number',
          required: true,
          message: '请选择出生日期',
          trigger: ['blur'],
        },
        otherIndustryName: {
          type: 'string',
          required: true,
          message: '请输入行业名称',
          trigger: ['blur', 'change'],
        },
        mobile: {
          validator: (rule, value, callback) => {
            if (!value) return callback('请输入联系人手机号')
            if (!this.$utils.isPhoneNumber(value)) return callback('请输入正确的手机号')
            return callback()
          },
          trigger: ['blur'],
        },
        major: {
          type: 'string',
          required: true,
          message: '请填入专业大类',
          trigger: ['blur', 'change'],
        },
        provideDirection: {
          validator: (rule, value, callback) => {
            return value.length ? true : false
          },
          message: '请选择产业',
          trigger: ['blur', 'change'],
        },
        company: {
          type: 'string',
          required: true,
          message: '请输入单位名称',
          trigger: ['blur', 'change'],
        },
        title: {
          type: 'number',
          required: true,
          message: '请选择职称',
          trigger: ['blur', 'change'],
        },
        academicDegree: {
          type: 'number',
          required: true,
          message: '请选择学位',
          trigger: ['blur', 'change'],
        },
        support: {
          type: 'string',
          required: true,
          message: '请填入可提供的技术支持',
          trigger: ['blur', 'change'],
        },
      },
      industryListStr: '',
      showSex: false,
      showMajor: false,
      birthDayShow: false,
      birthDay: '',
      actions: [
        {
          name: '男',
          id: 1,
        },
        {
          name: '女',
          id: 2,
        },
      ],
      actionsMajor: [
        {
          name: '管理',
          id: '管理',
        },
        {
          name: '工学',
          id: '工学',
        },
        {
          name: '理学',
          id: '理学',
        },
        {
          name: '医学',
          id: '医学',
        },
        {
          name: '农学',
          id: '农学',
        },
      ],
      selectIndustryList: '',
      industryList: [
        '农业',
        '林业',
        '牧业',
        '渔业',
        '采矿业',
        '制造业',
        '电力',
        '热力',
        '燃气',
        '交通运输',
        '仓储',
        '邮政业',
        '信息传输',
        '建筑业',
        '软件',
        '信息技术',
        '其他',
      ],
      titleList: [
        {
          name: '高级',
          id: 1,
        },
        {
          name: '中级',
          id: 2,
        },
        {
          name: '初级',
          id: 3,
        },
        {
          name: '无',
          id: 4,
        },
      ],
      degreeList: [
        {
          name: '博士',
          id: 1,
        },
        {
          name: '硕士',
          id: 2,
        },
        {
          name: '学士',
          id: 3,
        },
      ],
      actionSupport: ['科技成果转让', '技术难题攻关', '科技服务咨询', '科技人才培养', '其他'],
      roleId: 0,
      examiningConfirmShow: false,
      examining: false, //禁止编辑
      examiningId: '',
      identifyingCode: '',
      codeConfirmShow: false,
      isChat: false,
      myself: false, //是否查看个人信息
    }
  },
  filters: {
    titleForm(value) {
      if (value == 1) {
        return '高级'
      } else if (value == 2) {
        return '中级'
      } else if (value == 3) {
        return '初级'
      } else if (value == 4) {
        return '无'
      } else {
        return ''
      }
    },
    degreeForm(value) {
      if (value == 1) {
        return '博士'
      } else if (value == 2) {
        return '硕士'
      } else if (value == 3) {
        return '学士'
      }
    },
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules)
  },
  onLoad(options) {
    this.isAdd = options.isAdd && true
    this.roleId = options.id
    if (options.examineId) {
      this.myself = options.myself || false
      uni.setNavigationBarTitle({ title: this.myself ? '我的信息' : '审核详情' })
      this.examiningId = options.examineId
      this.queryExaminingOrder(this.examiningId)
    } else if (options.userId) {
      this.isChat = true
      uni.setNavigationBarTitle({ title: '青年科技人员详情' })
      this.examining = true
      this.examiningId = options.userId
      this.queryUserDetail(this.examiningId)
    }
  },
  methods: {
    handleShowTitle() {
      if (this.examining) return
      this.titlePickerShow = true
    },
    queryUserDetail(userId) {
      this.$request('/user/userInfo', { userId }).then((res) => {
        let infoData = res.result.professionalApplyVo
        infoData.birthday = infoData.birthday ? new Date(infoData.birthday).getTime() : ''
        this.professional = Object.assign(this.professional, infoData)
        this.professional.provideDirection = this.professional.provideDirection?.split(',')
        let arraySup = this.professional.support?.split(':')
        this.professional.selectType = arraySup.length === 2 ? arraySup[0] : '科技成果转让'
        this.professional.support = arraySup.length === 2 ? arraySup[1] : arraySup[0]
        this.industryListStr = infoData.provideDirection
        this.professional.avatar = res.result.avatar
      })
    },
    queryExaminingOrder(examiningId) {
      let url = '/roleApply/roleApplyInfo'
      this.$request(url, { id: examiningId }).then((res) => {
        let infoData = res.result.professionalApply
        this.examining = this.myself ? (infoData.audit === 0 ? true : false) : true
        infoData.birthday = new Date(infoData.birthday).getTime()
        this.professional = Object.assign(this.professional, infoData)
        this.professional.provideDirection = this.professional.provideDirection.split(',')
        if (!this.examining && this.professional.provideDirection.includes('其他')) {
          this.professional.otherIndustryName = this.professional.provideDirection[0]
          this.professional.provideDirection.shift()
        }
        let arraySup = this.professional.support.split(':')
        this.professional.selectType = arraySup.length === 2 ? arraySup[0] : '科技成果转让'
        this.professional.support = arraySup.length === 2 ? arraySup[1] : arraySup[0]
        this.industryListStr = this.professional.provideDirection.join(',')
      })
    },
    industryListChange(e) {
      this.professional.provideDirection = e.list
      this.industryListStr = e.textStr || ''
    },
    changeTitleHandler(param) {
      this.titlePickerShow = false
      this.professional.title = param.id
    },
    handleShowDegree() {
      if (this.examining) return
      this.degreePickerShow = true
    },
    changeDegreeHandler(param) {
      this.degreePickerShow = false
      this.professional.academicDegree = param.id
    },
    supportSelect(param) {
      this.showSupport = false
      this.professional.selectType = param.id
    },
    handleTitleClose() {
      this.titlePickerShow = false
    },
    sexSelect(e) {
      this.professional.sex = e.id
    },
    majorSelect(e) {
      this.professional.major = e.id
    },
    handleSelectBirthday(e) {
      this.birthDayShow = false
      this.professional.birthday = e.value
    },
    handleBirthdayShow() {
      if (this.examining) return
      this.birthDayShow = true
    },
    handleCloseBirthday() {
      this.birthDayShow = false
    },
    handleShowSex() {
      if (this.examining) return
      this.showSex = true
    },
    handleShowMajor() {
      if (this.examining) return
      this.showMajor = true
    },
    handleShowSupport(e) {
      this.professional.selectType = e.textStr
    },
    handleSubmit() {
      this.$refs.uForm.validate().then((res) => {
        this.codeConfirmShow = true
      })
    },
    handleCodePass() {
      if (!this.identifyingCode) return this.$utils.toast('请输入验证码')
      const professional = this.$utils.deepCopy(this.professional)
      if (professional.otherIndustryName)
        professional.provideDirection.unshift(professional.otherIndustryName)
      professional.provideDirection = professional.provideDirection.join(',')
      delete professional.otherIndustryName
      professional.support = professional.selectType + ':' + professional.support
      delete professional.selectType
      this.$request('/roleApply/roleApply', {
        roleId: this.roleId || 3,
        msgCode: this.identifyingCode,
        professionalApplyVo: professional,
      }).then((res) => {
        this.$utils.toast('认证已提交审核')
        this.codeConfirmShow = false
        setTimeout(() => {
          uni.navigateBack({})
        }, 1000)
      })
    },
    handleRefuse() {
      this.$refs.remarkPop.showPop()
    },
    handleExaminingCancel() {
      this.examiningConfirmShow = false
    },
    handleExamining() {
      this.examiningConfirmShow = true
    },
    handleExaminingPass() {
      this.$request('/roleApply/auditRoleApply', {
        audit: 1,
        id: this.examiningId,
      }).then((res) => {
        this.examiningConfirmShow = false
        this.$utils.toast('审核已通过')
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      })
    },
    codeChange(text) {
      this.tips = text
    },
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        // 向后端请求验证码
        this.$request('/user/sms', {
          mobile: this.professional.mobile,
        }).then((res) => {
          uni.$u.toast('验证码已发送')
          this.$refs.uCode.start()
        })
      } else {
        uni.$u.toast('倒计时结束后再发送')
      }
    },
    handleCloseCode() {
      this.codeConfirmShow = false
    },
    remarkComfirn(param) {
      this.$request('/roleApply/auditRoleApply', {
        audit: 2,
        failReason: param.custRemark,
        id: this.examiningId,
      }).then((res) => {
        this.$utils.toast('审核已拒绝')
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      })
    },
    goChat() {
      // uni.setStorageSync('chatUser', {
      //   id: this.examiningId,
      //   name: this.professional.name,
      //   avatar: this.professional.avatar || '',
      // })
      this.$routeUtils.navigateTo({
        url: `/pages/new/sendMsg?id=${this.examiningId}&name=${this.professional.name}`,
      })
    },
  },
}
</script>

<style scoped lang="scss">
.form-page {
  padding: 0 20rpx;
  padding-top: 20rpx;
}
.form-item {
  border-radius: 10rpx;
  padding: 0 20rpx;
  padding-bottom: 20rpx;
}
.input-place {
  font-size: 15px;
  color: rgb(192, 196, 204);
}
.fun-picker-view {
  color: rgb(192, 196, 204);
  width: 300rpx;
  font-size: 15px;
}
.title-demand {
  font-size: 15px;
  font-weight: 500;
  padding: 20rpx 0rpx;
  justify-content: space-between;
}
.add {
  font-size: 13px;
  color: #00b4fd;
}
.vertical-textarea {
  .u-textarea {
    min-height: 150rpx;
  }
}
.industry-name {
  color: #333;
}
.code-input {
  width: 400rpx;
  height: 80rpx;
  font-size: 32rpx;
  margin-left: 80rpx;
  margin-top: 40rpx;
}
.foot-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
  background-color: #fff;
  padding-top: 10rpx;
  padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
  justify-content: space-between;
  .btn {
    display: inline-flex;
    margin-right: 20rpx;
  }
  .item-left {
    padding: 0 30rpx;
  }
}
</style>
